<template>
  <div>
    <el-form :model="formData" ref="formData" :rules="formRules" label-position="top" class="form-data">
      <el-form-item label="服务名称" prop="name">
        <el-input v-model="formData.name" placeholder="请输入" style="width: 100%"/>
      </el-form-item>

      <el-form-item label="服务图标" prop="icon">
        <div class="image-view" v-if="formData.icon">
          <el-image :src="formData.icon" fit="cover" style="width: 100%; height: 100%"></el-image>
          <i class="el-icon-circle-close" @click="formData.icon = null"></i>
        </div>
        <UploadFile v-model="formData.icon" v-else style="width: 100%"/>
      </el-form-item>

      <el-form-item label="服务城市" prop="type">
        <el-radio-group v-model="formData.type">
          <el-radio :label="0">单个城市</el-radio>
          <el-radio :label="1">全部城市</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="服务城市" prop="addressId" v-if="formData.type == 0">
        <el-cascader v-model="formData.addressId" ref="cascader" :props="props" @change="handleChange" style="width: 100%" :key="formData.city"/>
      </el-form-item>

      <el-form-item label="跳转地址" prop="jumpAddress">
        <el-input v-model="formData.jumpAddress" placeholder="请输入" style="width: 100%"/>
      </el-form-item>
      <el-form-item label="显示状态" prop="display">
        <el-radio-group v-model="formData.display">
          <el-radio :label="0">未注册</el-radio>
          <el-radio :label="1">已注册</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="上架状态" prop="state">
        <el-switch v-model="formData.state" :active-value="1" :inactive-value="0" active-text="上架" inactive-text="下架"></el-switch>
      </el-form-item>

      <el-form-item label="权重" prop="sort">
        <el-input type="number" v-model="formData.sort" placeholder="请输入" style="width: 100%"/>
      </el-form-item>

      <el-form-item class="form-button" >
        <el-button class="but-view" @click="drawerClose">取 消</el-button>
        <el-button class="but-view" type="primary" @click="onSubmit">{{formData.id ? '修 改' : '提 交'}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {getProvinces} from '@/utils/common.js'
  export default {
    name: 'ShowManageForm',
    props: {
      entity: Object,
      status: String
    },
    data() {
      return {
        gardenList: [],
        enterpriseList: [],
        housingList: [],
        agentList: [],
        formData: {
          addressId: null,
          city: null, // 市
          icon: null, // 图标
          jumpAddress: null, // 跳转地址
          name: null, // 名字
          state: null, // 上架状态(0 下架 1上架)
          type: 0, // 服务城市类型 ：0单个城市 1全部城市
          sort: null, // 排序 权重（数字越大越靠前）
          display: 0, // 显示 0 未注册 1已注册
        },
        formRules: {
          addressId: [
            { required: true, message: '请选择城市', trigger: 'change' }
          ],
          icon: [
            { required: true, message: '请上传图标', trigger: 'change' }
          ],
          jumpAddress: [
            { required: true, message: '请输入地址', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入服务名称', trigger: 'blur' }
          ],
          sort: [
            { required: true, message: '请输入权重', trigger: 'blur' }
          ]
        },
        props: getProvinces(),
      }
    },
    beforeMount() {
      if (this.entity) this.getDetails()
    },
    methods: {
      handleChange(row) {
        const entity = this.$refs.cascader.getCheckedNodes()[0]
        const list = entity && entity.pathLabels && entity.pathLabels.length > 0 ? entity.pathLabels : [null, null, null]
        let arr = ['province', 'city']
        for (let i = 0; i < list.length; i++) this.formData[arr[i]] = list[i]
      },
      drawerClose() {
        this.$emit('close')
      },
      async onSubmit() {
        this.$refs.formData.validate(async(valid) => {
          if (!valid) return
          this.formData.addressId = this.formData.addressId && this.formData.addressId.length ?  this.formData.addressId.join(',') : ''
          const url = this.formData.id ? '/wx/management/update' : '/wx/management/add'
          await this.$ajax.post(url, this.formData)
          this.$message.success('操作成功!')
          this.$emit('refresh')
          this.drawerClose()
        })
      },
      /**
       * 获取详情
       */
      async getDetails() {
        const res = await this.$ajax.get(`/wx/management/info?id=${this.entity.id || ''}`)
        res.data.addressId = res.data.addressId ? res.data.addressId.split(',') : []
        this.formData = res.data
      }
    }
  }
</script>

<style scoped lang="scss">
  .image-view {
    width: 100%;
    height: 178px;
    position: relative;
    .el-icon-circle-close {
      font-size: 30px;
      color: red;
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 100;
    }
    .el-icon-circle-close:hover {
      cursor: pointer;
    }
  }
</style>
